import React, { useState } from 'react'
// 引入子组件
import List from './components/Item/index'
import Item from './components/index'

// 创建一个可以提供数据的上下文对象React.createContext()
export const AppContext = React.createContext()
// export const App2Context= React.createContext()

export default function App() {
  const [car, setCar] = useState('奥拓')
  const changeCar = () => {
    setCar('奥迪RS7')
  }

  return (
    <div>
      <h1>我是父亲,我开的车是{car}</h1>
      <button onClick={changeCar}>换车</button>
      <hr />
      {/* 共享对象AppContext上有一个Provide属性是一个组件,他可以给组件内部包含的组件提供数据,提供的数据放在value属性上 */}
      <AppContext.Provider value={car}>
        {/* 链接子组件 */}
        {/* <List /> */}
        <Item />
      </AppContext.Provider>

    </div>
  )
}

// undefined出现的几种情况
// 1.变量被声明了，但没有赋值时，就等于undefined
// 2.调用函数时，应该提供的参数没有提供，该参数等于undefined
// 3.对象没有赋值的属性，该属性的值为undefined
// 4.函数没有返回值时，默认返回undefined


// null出现的几种情况
// 1.原型链终点
// 2.在不确定变量的值的时候使用null
// 3.将一个对象变成垃圾对象的时候（这个对象永远不使用了）


// 内存泄漏
// 一个数据永远不使用了，但是仍然占用着内存空间就叫内存泄漏
// 闭包会导致内存泄露

// 内存溢出
// 程序在内存在中运行,但是一直未清理,最后程序占用的内存大于了运行的内存,会导致爆栈,这个就是内存溢出